<template>
  <div>
    <el-upload
      class="avatar-uploader"
      action="/upload"
      :show-file-list="false"
      :on-success="uploadSuccess"
    >
      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
      <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
    </el-upload>

    <el-upload
      v-model:file-list="fileList"
      action="/upload"
      list-type="picture-card"
      :on-success="uploadSuccess"
      :on-error="uploadError"
      :limit="1"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
    >
      <img v-if="imageUrl" :src="imageUrl" class="avatar" />

      <el-icon><Plus /></el-icon>
    </el-upload>

    <el-dialog v-model="dialogVisible">
      <img w-full :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { Plus } from '@element-plus/icons-vue';

  import type { UploadProps, UploadUserFile } from 'element-plus';

  const imageUrl = ref('');

  const fileList = ref<UploadUserFile[]>([
    {
      name: 'food.jpeg',
      url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
    },
  ]);

  const dialogImageUrl = ref('');
  const dialogVisible = ref(false);

  const uploadSuccess = (res) => {
    imageUrl.value = res.result;
    console.log(res);
  };
  const uploadError = (res) => {
    console.log(res);
  };
  const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
    console.log(uploadFile, uploadFiles);
  };

  const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
    dialogImageUrl.value = uploadFile.url!;
    dialogVisible.value = true;
  };
</script>

<style scoped>
  .avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }

  .avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
  }

  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    text-align: center;
  }
</style>
